<template>
  <modal :show.sync="show" effect="zoom" title="修改基础资料">
    <div slot="modal-body" class="modal-body">
      <validator name="modifyBasebaseInfoForm">
        <form class="form-horizontal" role="form">
          <div class="form-group">
              <label for="nickName" class="col-md-2 control-label">昵称</label>
              <div class="col-md-10">
                <input type="text" class="form-control" v-model="newInfo.nickName" id="nickName" placeholder="请输入昵称"  initial="off" detect-change="off" v-validate:nick-name="{'required':true}">
                <div>
                  <error-template v-show="$modifyBasebaseInfoForm.nickName.required">{{$modifyBasebaseInfoForm.nickName.required}}</error-template>
                </div>
              </div>
          </div>
          <div class="form-group">
              <label for="sex"  class="col-md-2 control-label">性别</label>
              <div class="col-md-10">
                <label class="checkbox-inline">
                  <input type="radio" name="sex" value="1" v-model.number="newInfo.sex" number initial="off" detect-change="off" v-validate:sex="{'required':true} ">男
                </label>
                <label class="checkbox-inline">
                  <input type="radio" name="sex" value="2" v-model.number="newInfo.sex" number initial="off" detect-change="off" v-validate:sex>女
                </label>
                <label class="checkbox-inline">
                  <input type="radio" name="sex" value="0" v-model.number="newInfo.sex" number initial="off" detect-change="off" v-validate:sex>其他
                </label>
                <div>
                  <error-template v-show="$modifyBasebaseInfoForm.sex.required">{{$modifyBasebaseInfoForm.sex.required}}</error-template>
                </div>
              </div>
          </div>
          <div class="form-group">
              <label for="birthday"  class="col-md-2 control-label">生日</label>
              <div class="col-md-10">
                <datepicker :value.sync="newInfo.birthday" :disabled-days-of-week="disabled" :format="'yyyy-MM-dd'" :clear-button="clear" :placeholder="'请选择生日'">
                </datepicker>
                <input type="hidden" class="form-control" v-model="newInfo.birthday" id="birthday" placeholder="请选择生日"  initial="off" detect-change="off" v-validate:birthday="{'required':true}">
                <div>
                  <error-template v-show="$modifyBasebaseInfoForm.birthday.required">{{$modifyBasebaseInfoForm.birthday.required}}</error-template>
                </div>
              </div>
          </div>
          <div class="form-group">
              <label for="address"  class="col-md-2 control-label">地址</label>
              <div class="col-md-10">
                <input type="text" class="form-control" v-model="newInfo.address" id="address" placeholder="请输入地址"  initial="off" detect-change="off" v-validate:address="{'required':true}">
                <div>
                  <error-template v-show="$modifyBasebaseInfoForm.address.required">{{$modifyBasebaseInfoForm.address.required}}</error-template>
                </div>
              </div>
          </div>
        </form>
      </validator>
    </div>
    <div slot="modal-footer" class="modal-footer">
      <button type="button" class="btn btn-default" @click="this.show = false">取消</button>
      <button type="button" class="btn btn-success" v-on:click.prevent="updateBasebaseInfo">确定</button>
    </div>
  </modal>
</template>

<script>
/**
 * @author: guocailee
 */
import { updateBaseInfo } from 'src/store/actions/info'
export default {
  vuex: {
    getters: {
      baseInfo: function({ info }) {
        return info.base
      }
    },
    actions: {
      updateBaseInfo
    }
  },
  data: () => {
    let newInfo = {
      nickName: '',
      sex: '',
      birthday: '',
      address: ''
    }
    return { newInfo }
  },
  props: {
    show: {
      required: true,
      type: Boolean,
      twoWay: true
    }
  },
  methods: {
    updateBasebaseInfo() {
      var self = this
      this.$validate(true, () => {
        if (self.$modifyBasebaseInfoForm.invalid) {
          return
        }
        let temp = JSON.parse(JSON.stringify(self.newInfo))
        temp.birthday = self.$moment(temp.birthday, 'YYYY-MM-DD')._d.getTime()
        self.updateBaseInfo(temp).then(data => {
          self.show = false
        }).catch(message => self.$notify.error(message))
      })
    }
  },
  ready() {
    let self = this
    this.$store.watch(({ info }) => {
      let temp = JSON.parse(JSON.stringify(info.base))
      temp.birthday = self.$moment(temp.birthday).format('YYYY-MM-DD')
      self.newInfo = temp
    })
  }
}
</script>
<style>

</style>